<template>
  <common-card
    title="累计订单量"
    :value="orderToday"
  >
    <template>
      <v-chart :options="totalOrders"></v-chart>
    </template>
    <template v-slot:footer>
      <span>昨日订单量 </span>
      <span class="emphasis">{{ orderLastDay }}</span>
    </template>
  </common-card>
</template>

<script>
import commonCardMixin from '@/mixins/commonCardMixin'
import { totalOrder } from '@/api/axiosHttp'
import { format } from '@/utils'

export default {
  name: 'TotalOrders',
  mixins: [commonCardMixin],
  data () {
    return {
      orderData: [],
      orderLastDay: 0,
      orderToday: 0
    }
  },
  computed: {
    totalOrders () {
      return this.orderData.length ? {
        xAxis: {
          type: 'category',
          show: false,
          boundaryGap: false
        },
        yAxis: {
          show: false
        },
        series: [{
          type: 'line',
          data: this.orderData,
          areaStyle: 'skybule',
          smooth: true,
          lineStyle: {
            width: 0
          },
          itemStyle: {
            opacity: 0
          }
        }],
        grid: {
          top: 0,
          bottom: 0,
          left: 0,
          right: 0
        }
      } : {}
    }
  },
  created () {
    totalOrder().then(data => {
      const {
        orderData,
        orderLastDay,
        orderToday
      } = data
      this.orderData = orderData
      this.orderLastDay = format(orderLastDay)
      this.orderToday = format(orderToday)
    })
  }
}
</script>

<style scoped>

</style>
